<template>
	<audio autoplay :src="[musicAudUrl ? musicAudUrl : '']" ref="audio"></audio>
</template>

<script>
export default {
	name: "MusicPlay",
	components: "{}",
};
</script>

<script setup>
import { defineProps, ref, watch, nextTick } from "vue";

const audio = ref(null);
const curTime = ref(0);

const props = defineProps({
	musicAudUrl: {
		type: String,
		required: true,
	},
	stop: {
		type: Boolean,
		required: true,
	},
});

const play = (stop) => {
	if (!stop) {
		curTime.value = audio.value.currentTime;
		nextTick(() => {
			audio.value.pause();
		});
	} else if (curTime.value != 0) {
		audio.value.load();
		audio.value.currentTime += curTime.value;
	}
};

watch(props, (props) => {
	play(props.stop);
});
</script>

<style lang="less" scoped></style>
